<script>
/**
 * @desc 用户页面的功能链接
 */

import arrow from '@/assets/icons/arrow.png'

export default {
  name: 'link-item',
  props: {
    icon: String,
    text: String,
    handleClick: Function
  },
  data: () => ({ arrow }),
  methods: {
    handle() {
      this.handleClick && this.handleClick()
    }
  }
}
</script>

<template>
  <div class="link-item" @click="handle">
    <img :src="icon" class="icon" mode="aspectFill" />
    <span class="text">{{text}}</span>
    <img :src="arrow" class="arrow-right" mode="aspectFill" />
  </div>
</template>

<style lang="scss">
$icon-size: 25px;

.link-item {
  display: flex;
  align-items: center;
  padding: 16px 10px;
  &:not(:last-child) {
    border-bottom: 1px solid $border-color;
  }

  .text {
    flex: 1;
    margin: 0 10px;
  }

  .icon,
  .arrow-right {
    width: $icon-size;
    height: $icon-size;
  }
}
</style>
